<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core">
      
      
      <!--SCRIPTS-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">
$(document).ready(function() {
	$(".username").focus(function() {
		$(".user-icon").css("left","-48px");
	});
	$(".username").blur(function() {
		$(".user-icon").css("left","0px");
	});
	
	$(".password").focus(function() {
		$(".pass-icon").css("left","-48px");
	});
	$(".password").blur(function() {
		$(".pass-icon").css("left","0px");
	});
});
</script>
      
      
    <h:head>
        <title>Ingreso al sistema</title>
        <link rel="stylesheet" href="css/style.css"/>
    </h:head>
    <h:body>
    <div id="wrapper">
    <!--SLIDE-IN ICONS-->
    <div class="user-icon"></div>
    <div class="pass-icon"></div>
    <!--END SLIDE-IN ICONS-->
        <div class="contenedorLogin">
            <h:form class="login-form">
                <div class="header">
                <h1>Acceso de Usuario</h1>
                <p>Porfavor ingrese su usuario y contrasena</p>
               </div>
               <div class="content">
                <h:inputText pt:placeholder="Usuario" value="#{mbLogin.usuario}" class="input username" onfocus="this.value=''"/>
                <p><h:inputSecret pt:placeholder="Contraseña" value="#{mbLogin.contrasenia}" class="input password" onfocus="this.value=''"/></p>
                <h:messages infoStyle="color: blue;list-style:none;" errorStyle="color:red;list-style:none;"/>
                </div>
                <div class="footer">
                
                    <h:commandButton value="Ingresar" action="#{mbLogin.login()}" class="button" />
                </div>
            </h:form>
       </div>
    </div>
    
    </h:body>
</html>